import React from 'react';
import { render } from 'react-dom'
// import Routes from './routes/routes'

// import 'antd/dist/antd.css';

class Welcome extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello, {this.props.name}!</h1>
                <h1>Age: {this.props.age}.</h1>
            </div>
        );
    }
}

class Clock extends React.Component {
    // state = {};
    constructor(props) {
        super(props);
        this.tick();
        this.state = {date: new Date()};
    }

    componentDidMount() {
        this.timerId = setInterval(() => {
            this.tick();
        }, 1000);
    }

    tick() {
        this.setState({
            date: new Date()
        });
    }

    componentWillUnmount() {
        clearInterval(this.timerId);
    }
    render() {
        return (
            <div>
                <h1>Now Time</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}

import { Layout, LocaleProvider, Button, Icon, Modal } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import {TopNavigtion} from './components/topNavigtion.jsx';
import {CanvasContainer} from './components/canvasContainer.jsx';
import {CanvasShape} from './components/canvasShape.jsx';


import './css/main.sass';


const { Header, Content, Sider } = Layout;
class App extends React.Component {
    state = {
        date: null,
        siderCollapsed: false
    };

    constructor(props) {
        super(props);
    }

    toggleSider = () => {
        this.setState({
            siderCollapsed: !this.state.siderCollapsed
        });
    }

    onSiderCollapse = (collapsed) => {
        this.setState({
            siderCollapsed: collapsed
        });
    }

    /**
     * 子组件canvasShape变化选择
     */
    onShapeChanged = (val) => {
        this._drawingBoard.setShape(val);
    }

    onBuildDrawingBorad = (handler) => {
        this._drawingBoard = handler;
    }

    render() {
        return (
            <LocaleProvider locale={zhCN}>
            <div>
                <Layout>
                    <Header style={{ height: '46px', lineHeight: '46px', padding: '0px' }}>
                        <TopNavigtion />
                    </Header>
                    <Layout style={{ height: 'calc(100vh - 46)'}}>
                        <Sider
                            // trigger={null}
                            width={200} 
                            style={{ background: '#fff'}} 
                            collapsible
                            collapsed={this.state.siderCollapsed}
                            onCollapse={this.onSiderCollapse}
                        >
                            <CanvasShape theme="light" height="100%" onShapeChanged={this.onShapeChanged}/>
                        </Sider>

                        <Content style={{background: '#fff', padding: 0, margin: 0, height: 'calc(100vh - 46px)'}}>
                            <CanvasContainer 
                                canvasId="c" 
                                style={{ height: '100%'}} 
                                onBuildDrawingBorad={this.onBuildDrawingBorad}
                            />
                        </Content>
                    </Layout>
                </Layout>
            </div>
            </LocaleProvider>
        );
    }
}
render(
    <App/>,
    document.getElementById('app')
);